<template>
	<view>
			<u-navbar :is-back="false" title="首页" :background="background">
			<view class="map-wrap" @click="goHome">
				<u-icon  name="home" size="38" ></u-icon>
			</view>
		</u-navbar>
		<view class="uni-padding-wrap">
			<view style="background:#FFFFFF; padding:40rpx;">
				<view class="uni-hello-text uni-center">当前位置信息</view>
				<block v-if="hasLocation === false">
					<view class="uni-h2 uni-center uni-common-mt">未选择位置</view>
				</block>
				<block v-if="hasLocation === true">
					<view class="uni-hello-text uni-center" style="margin-top:10px;">
						{{locationAddress}}
					</view>
					<view class="uni-h2 uni-center uni-common-mt">
						<text>E: {{location.longitude[0]}}°{{location.longitude[1]}}′</text>
						<text>\nN: {{location.latitude[0]}}°{{location.latitude[1]}}′</text>
					</view>
				</block>
			</view>
			<view class="uni-btn-v">
				<button type="primary" @tap="chooseLocation">选择位置</button>
				<button @tap="clear">清空</button>
			</view>
		</view>
		<!-- 与包裹页面所有内容的元素u-page同级，且在它的下方 -->
		<u-tabbar :list="tabbar" :mid-button="true"></u-tabbar>
	</view>
</template>
<script>
	var util = require('../../../common/util.js');
	var formatLocation = util.formatLocation;

	export default {
		data() {
			return {
				title: 'chooseLocation',
				hasLocation: false,
				location: {},
				locationAddress: '',
				tabbar: '',
			}
		},
		onLoad(){
			this.tabbar = this.$store.state.tabbar
		},
		methods: {
			chooseLocation: function () {
				uni.chooseLocation({
					success: (res) => {
						this.hasLocation = true,
							this.location = formatLocation(res.longitude, res.latitude),
							this.locationAddress = res.address
							console.log(res)
					}
				})
			},
			clear: function () {
				this.hasLocation = false
			},
			goHome() {
				console.log("s1");
				// 无参数
				this.$u.route({
				url: "pages/index/index",
				type: "tab",
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	/* .page-body-info {
		padding-bottom: 0;
		height: 440rpx;
	} */
		.slot-wrap {
		display: flex;
		align-items: center;
		/* 如果您想让slot内容占满整个导航栏的宽度 */
		/* flex: 1; */
		/* 如果您想让slot内容与导航栏左右有空隙 */
		padding: 0 30rpx; 
	}
	.wrap {
		padding: 2rpx;
	}
		.map-wrap {
		display: flex;
		align-items: center;
		padding: 4px 6px;
		background-color: rgba(240,240, 240, 0.35);
		color: #fff;
		font-size: 22rpx;
		border-radius: 100rpx;
		margin-left: 30rpx;
	}
	
	.map-wrap-text {
		padding: 0 6rpx;
	}
</style>
